<template>
    <div class="learning_warp">
        <!--视频-->
        <div class="study_video">
            <div class="study_title">
                <div class="title_name">
                    <h3>我学习过的视频</h3>
                </div>
                <div class="more">
                    <span>更多 > </span>
                </div>
            </div>
            <div class="video_warp">
                <swiper :options="swiperOption" v-if="imgList.length>0" ref="mySwiper">
                    <swiper-slide v-for="(item, index) in imgList" :key="index">
                        <div class="video_list">
                            <img :src="item.imgUrl" :title="item.id" />
                            <p class="video_name">{{item.name}}</p>
                        </div>
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                    <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div>
                </swiper>
            </div>
        </div>
        <!--班级错题-->
        <div class="class_mistakes" v-if="false">
            <div class="study_title">
                <div class="title_name">
                    <h3>班级错题本</h3>
                </div>
                <div class="more">
                    <span>更多 > </span>
                </div>
            </div>
            <ul class="wrong_Topic clearFix">
                <li class="topic_list">
                    <div class="topic_detail">
                        <p class="subject">赛贝尔曲线</p>
                        <p class="topicType clearFix">
                            <span>数学题：</span>
                            <span>单选题</span>
                        </p>
                    </div>
                    <span>错：30人</span>
                </li>
                <li class="topic_list">
                    <div class="topic_detail">
                        <p class="subject">赛贝尔曲线</p>
                        <p class="topicType clearFix">
                            <span>数学题：</span>
                            <span>单选题</span>
                        </p>
                    </div>
                    <span>错：30人</span>
                </li>
            </ul>
        </div>
        <!--做过试题-->
        <div class="questions">
            <div class="study_title">
                <div class="title_name">
                    <h3>我做过的试题</h3>
                </div>
                <div class="more">
                    <span><el-select v-model="questionsV" placeholder="请选择" size="mini"
                    @change="questionsChange">
                        <el-option
                        v-for="item in questionYList"
                        :key="item"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select></span>
                </div>
            </div>
            <div class="questions_list">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="charts">
                            <EchartsQuestions :title="questionsV +'上半年'" :xAxisName="upperYear" :metadata='questionList.slice(0,6)'></EchartsQuestions>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="charts">
                            <EchartsQuestions :title="questionsV +'下半年'" :xAxisName="lowerYear" :metadata='questionList.slice(6,12)'></EchartsQuestions>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!--做的错题-->
        <div class="questions">
            <div class="study_title">
                <div class="title_name">
                    <h3>我的错题本</h3>
                </div>
                <div class="more">
                    <el-select v-model="questionsErrorV" placeholder="请选择" size="mini"
                    @change="questionsErrorChange">
                        <el-option
                        v-for="item in questionErrorYList"
                        :key="item"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="questions_list">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="charts">
                            <EchartsQuestions :title="questionsV +'上半年'" :xAxisName="upperYear" :metadata='questionErrorList.slice(0,6)'></EchartsQuestions>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="charts">
                            <EchartsQuestions :title="questionsV +'下半年'" :xAxisName="lowerYear" :metadata='questionErrorList.slice(6,12)'></EchartsQuestions>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!--收藏-->
        <div class="collection">
            <div class="study_title">
                <div class="title_name">
                    <h3>我的收藏</h3>
                </div>
                <ul class="collectionBox">
                    <li :class="isActive == item.id?'active':''" v-for="item in Start" :key="item.id" @click="handleActive(item.id)">{{item.name}}</li>
                </ul>
                <div class="more">
                    <span>更多 > </span>
                </div>
            </div>
            <!--视频-->
            <ul v-if="isActive == 1 " class="favorites_list clearFix">
                <li class="list" v-for="(item,index) in srcList" :key="index">
                    <div class="cover_img">
                        <el-image :src="item" fit="fill">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                    <div class="detail">
                        <p class="videoName">三生三世、十里桃花</p>
                        <p>上传时间：<span>2020-04-16</span></p>
                        <p>播放时间：<span>00:30:56</span></p>
                        <p>讲师：<span>老许</span></p>
                    </div>
                    <i class="el-icon-star-on iconStart"></i>
                </li>
            </ul>
            <!--试卷/试题/文章-->
            <ul v-if="isActive !== 1" class="tryTopic">
                <li class="tryTopic_list">
                    <div class="tryTopic_title">
                        <span>2019年4月份试题</span>
                    </div>
                    <div class="tryTopic_time">
                        <span>2020-2-15(100/3)</span>
                    </div>
                </li>
                <li class="tryTopic_list">
                    <div class="tryTopic_title">
                        <span>2019年4月份试题</span>
                    </div>
                    <div class="tryTopic_time">
                        <span>2020-2-15(100/3)</span>
                    </div>
                </li>
            </ul>

            <el-button type="text">查看更多</el-button>
        </div>
    </div>
</template>

<script>
    import StudyTitle from '@c/LearningSpace/studyTitle';
    import EchartsQuestions from '@c/echarts/lineEcharts/questionsEchartLine'
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState({
                // 用户详细信息
                otherUserInfo: state => state.userModule.otherUserInfo,
            })
        },
        created(){
            this.getQuestionsDone()
            this.getWrongQuestion()
        },
        data() {
            return {
                questionsErrorV: (new Date).getFullYear(),
                questionsV: (new Date).getFullYear(),
                questionYList:[(new Date).getFullYear()],
                questionErrorYList:[(new Date).getFullYear()],
                questionList:[],
                questionErrorList:[],
                yearsP: (new Date).getFullYear(),
                upperYear: ['一月', '二月', '三月', '四月', '五月', '六月'],
                lowerYear: ['七月', '八月', '九月', '十月', '十一月', '十二月'],
                srcList: [
                    require('../../../assets/img/headportrait01.jpg'),
                    require('../../../assets/img/headportrait02.jpg'),
                    require('../../../assets/img/headportrait03.jpg')
                ],
                swiperOption:{
                    loop : false,
                    autoplay: false,
                    slidesPerView: 4,
                    spaceBetween: 30,
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    on: {
                        tap:function (e) {
                        }
                    }
                },
                imgList: [{
                        id: '001',
                        imgUrl: require("../../../assets/img/banner.jpg"),
                        name:"智慧教学"
                    },
                    {
                        id: '002',
                        imgUrl: require("../../../assets/img/banner2.jpg"),
                        name:"三国杀"
                    },
                    {
                        id: '003',
                        imgUrl: require("../../../assets/img/banner3.jpg"),
                        name:"水浒传"
                    },
                    {
                        id: '004',
                        imgUrl: require("../../../assets/img/banner4.jpg"),
                        name:"三打白骨精"
                    },
                    {
                        id: '005',
                        imgUrl: require('../../../assets/img/headportrait01.jpg'),
                        name:"柒个我"
                    },
                    {
                        id: '006',
                        imgUrl: require('../../../assets/img/headportrait02.jpg'),
                        name:"伍六七"
                    },
                    {
                        id: '007',
                        imgUrl: require('../../../assets/img/headportrait03.jpg'),
                        name:"一条狗的使命"
                    }
                ],
                Start:[{
                    id:1,
                    name:"视频"
                },{
                    id:2,
                    name:"试卷"
                },{
                    id:3,
                    name:"试题"
                },{
                    id:4,
                    name:"文章"
                }],
                isActive:1
            }
        },
        components: {
            StudyTitle,
            EchartsQuestions
        },
        mounted() {

        },
        methods: {
            questionsChange(){
                this.getQuestionsDone(this.questionsV)
            },
            questionsErrorChange(){
                this.getWrongQuestion(this.questionsErrorV)
            },
            getWrongQuestion(params){
                // console.log(this.otherUserInfo)
                this.$store.dispatch('homeModule/getWrongQuestion', {
                    userId: this.otherUserInfo.userid || this.otherUserInfo.id,
                    years: params?params:this.yearsP.toString()
                }).then(res =>{
                    if(res){
                        var count = Number(this.yearsP) - Number(res.list[0][0][0].minTime.slice(0,4))
                        if(count > 0 && !params){
                            for(var yr=1;yr <=1; yr++){
                                this.questionErrorYList.push(Number(this.yearsP)-yr)
                            }
                        }
                        this.questionErrorList = res.list[1]
                    }
                })
            },
            getQuestionsDone(params){
                this.$store.dispatch('homeModule/getQuestionsDone', {
                    userId: this.otherUserInfo.userid || this.otherUserInfo.id,
                    years: params?params:this.yearsP.toString()|| null
                }).then(res =>{
                    if(res){
                       var count = Number(this.yearsP) - Number(res.list[0][0].minTime.slice(0,4))
                        if(count > 0 && !params){
                            for(var yr=1;yr <=1; yr++){
                                this.questionYList.push(Number(this.yearsP)-yr)
                            }
                        }
                        this.questionList = res.list[1]
                        
                    }
                })
            },
            getCollectArticles(){

            },
            handleActive(id){
                this.isActive = id
            }
        }
    }
</script>

<style lang="scss" scoped>
    .learning_warp {
        box-sizing: border-box;
        padding: 5px;
        background-color: white;

        .study_video {
            width: 100%;

            .video_warp {
                width: 100%;
                height: 180px;
                margin: 10px 0;
            }
        }

        .questions {
            width: 100%;
            margin-top: 15px;

            .questions_list {
                margin: 10px 0;
                .charts{
                    width: 100%;
                    height: 400px;
                }
            }
        }

        .collection {
            width: 100%;
            margin-top: 15px;

            .favorites_list {
                box-sizing: border-box;
                padding-left: 8px;
                list-style-type: none;
                margin-block-start: 15px;
                margin-block-end: 15px;

                li {
                    width: 368px;
                    margin-right: 6px;
                    float: left;
                    box-sizing: border-box;
                    padding: 15px 10px;
                    background-color: #f5f7fa;
                    position: relative;

                    .cover_img {
                        width: 120px;
                        height: 120px;
                        float: left;
                    }

                    .detail {
                        float: left;
                        margin-left: 15px;

                        p {
                            margin-block-start: 0;
                            margin-block-end: 0;
                            color: #303133;
                            text-align: left;
                        }

                        .videoName {
                            width: 200px;
                            font-size: 18px;
                            font-weight: bold;
                            color: #409EFF;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        p:not(:first-of-type) {
                            margin-top: 12px;
                            font-size: 14px;
                        }
                    }

                    .iconStart {
                        position: absolute;
                        top: 0;
                        right: 0;
                        font-size: 22px;
                        color: #409EFF;
                    }
                }
            }

            .tryTopic{
                box-sizing: border-box;
                padding-left: 8px;
                list-style-type: none;
                margin-block-start: 10px;
                margin-block-end: 10px;
                .tryTopic_list{
                    box-sizing: border-box;
                    padding: 8px 5px;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    color: #303133;
                }
            }
        }

        .wrong_Topic{
            box-sizing: border-box;
            padding-left: 8px;
            list-style-type: none;
            margin-block-start: 10px;
            margin-block-end: 10px;
            .topic_list{
                float: left;
                margin-right: 15px;
                text-align: left;
                font-size: 12px;
                .topic_detail{
                    box-sizing: border-box;
                    padding: 4px 0;
                    background-color: #f5f7fa;
                    p{
                        box-sizing: border-box;
                        padding: 10px 15px;
                        margin-block-start: 0;
                        margin-block-end: 0;
                    }
                    .subject{
                        width: 160px;
                        text-align: center;
                        font-size: 16px;
                        border-bottom:1px solid #ccc;
                    }
                    .topicType{
                        text-align: justify;
                    }
                    .topicType>span:last-of-type{
                        float: right;
                    }
                }
            }
        }

        .video_list{
            width: 100%;
            height: 180px;
            position: relative;
            img{
                width:100%;
                height: 100%;
            }
            .video_name{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                color: #409EFF;
                box-sizing: border-box;
                padding: 10px 0;
                background-color: rgba(255,255,255,.9);
                margin-block-start: 0;
                margin-block-end: 0;
            }
        }
        .study_title{
            box-sizing: border-box;
            padding: 8px 0;
            margin: 0 auto;
            background-color: white;
            border-bottom:1px solid #ccc;
        }
        .title_name{
            float: left;
            h3{
                font-size: 18px;
                margin-block-start: 0;
                margin-block-end: 0;
                padding-left: 8px;
                border-left: 2px solid #409EFF;
            }
        }
        .collectionBox{
            float: left;
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;
            margin-top: 4px;
            li{
                float: left;
                margin-left: 35px;
                cursor: pointer;
                color: #303133;
                font-size: 15px;
            }
            li.active{
                color: #409EFF;
            }
        }
        .more{
            float: right;
            cursor: pointer;
            color: #909399;
            font-size: 14px;
            margin-top: 4px;
        }
    }
    .study_title::after,
    .clearFix::after {
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
</style>